Fix the bug with scrolling in Virtualize component with scaled elements #64013

dariatiurina · 2025-10-13T14:53:20Z

Fix the bug with scrolling in Virtualize component with scaled elements

Description

This pull request improves the Virtualize component’s handling of CSS scaling and transforms, ensuring correct virtualization behavior when parent elements use scale, zoom, or transform properties. It also adds new test to verify these changes.

The issue was caused by inconsistent scaling algorithm between JS and C#. JS operates on physical units, let's call it physical pixels - scaled pixel values. It used to send physical measurements to C#. C# operates on logical pixels, see e.g. ItemSize description

aspnetcore/src/Components/Web/src/Virtualization/Virtualize.cs

Line 91 in a54e8df

/// Gets the size of each item in pixels. Defaults to 50px.

and it assumed the values received from JS are not scaled. This PR standardizes the sizes to support logical-pixels-based communication between JS and C#.

Alternatives:

Convert all the calculations and logic of C# code to physical pixels. Component's input parameters can change on each render. If we wanted to convert them to physical values on each change (e.g storing the physical value as a private component member), it brings a similar performance overhead as the currently proposed fix.
Changing the meaning of the public parameters (from logical pixels to physical pixels) it would be a breaking change.
Officially decide we do not support scaling of the DOM elements that contain virtualize component. The scale could be used for the virtualize element only. Thanks to this, we would avoid transversing the DOM tree bottom-up - the most costly operation in this change.

Changes:

Updated Virtualize.ts to detect and correctly handle CSS scale, zoom, and transform properties on parent elements, adjusting scroll calculations so virtualization works accurately under scaling scenarios.
Added a new test CanScrollWhenAppliedScale to verify that virtualization works when CSS scale is applied.

Fixes #59354

Copilot

Pull Request Overview

This PR fixes a bug in the Virtualize component where scroll calculations were incorrect when CSS scaling transforms were applied to parent elements. The issue occurred because the component used physical pixel measurements without accounting for scale factors.

Adds scale factor detection and compensation logic to handle CSS scale, zoom, and transform properties
Converts physical pixel measurements to logical pixels for accurate virtualization calculations
Includes test coverage for the scaling scenario with a new E2E test

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
VirtualizationScale.razor	New test component demonstrating virtualization with CSS scale applied to body
QuickGridVirtualizeComponent.razor	Fixes items provider to respect pagination parameters
Index.razor	Adds new test component to navigation options
VirtualizationTest.cs	Adds E2E test to verify virtualization works with scaling
Virtualize.ts	Core fix - adds scale factor detection and applies compensation to scroll calculations

src/Components/Web.JS/src/Virtualize.ts

ilonatommy

Good job! The comments are mostly optional changes/questions.

src/Components/Web.JS/src/Virtualize.ts

src/Components/test/testassets/BasicTestApp/VirtualizationScale.razor

src/Components/Web.JS/src/Virtualize.ts

src/Components/test/E2ETest/Tests/VirtualizationTest.cs

src/Components/Web.JS/src/Virtualize.ts

ilonatommy · 2025-10-17T13:02:25Z

Performance analysis

I used performance.measure to track the increase in time spent in intersectionCallback, when scrolling through the virtualized list. Component used: VirtualizationScale.razor (very simple DOM, the perf will degrade with DOM complexity added). Units: ms.

scale 100% without the change:

{
  count: 210,
  avg: 0.5190476189766612,
  min: 0,
  max: 1.300000000745058,
  p95: 1
}

scale 75% with the change:

{
    "count": 313,
    "avg":  0.5769968050927781
    "min": 0,
    "max": 2.5,
    "p95": 1.0999999977648258
}

Average time increase: 11%.

javiercn · 2025-10-17T13:17:23Z

src/Components/Web.JS/src/Virtualize.ts

+        // Check for scale property (can have separate X/Y values)
+        if (computedStyle.scale && computedStyle.scale !== 'none' && computedStyle.scale !== '1') {
+          const parts = computedStyle.scale.split(' ');
+          const scaleY = parts.length > 1 ? parseFloat(parts[1]) : parseFloat(parts[0]);
+          scaleFactor *= scaleY; // Use vertical scale for vertical scrolling
+        }


I believe you only need to check computedStyle.transform as that should be the reliable single source-of-truth for combined transforms because the computed transform contains the resolved transform that includes scale, rotate, skew, and translate.

Fix the bug with the scale calculation in Virtualize component

68d743a

github-actions bot added the area-blazor Includes: Blazor, Razor Components label Oct 13, 2025

dariatiurina self-assigned this Oct 13, 2025

dariatiurina marked this pull request as ready for review October 13, 2025 14:56

dariatiurina requested a review from a team as a code owner October 13, 2025 14:56

Copilot AI review requested due to automatic review settings October 13, 2025 14:56

Copilot AI reviewed Oct 13, 2025

View reviewed changes

src/Components/Web.JS/src/Virtualize.ts Outdated Show resolved Hide resolved

src/Components/Web.JS/src/Virtualize.ts Outdated Show resolved Hide resolved

Feedback

2875785

ilonatommy reviewed Oct 14, 2025

View reviewed changes

src/Components/test/E2ETest/Tests/VirtualizationTest.cs Outdated Show resolved Hide resolved

javiercn reviewed Oct 14, 2025

View reviewed changes

src/Components/Web.JS/src/Virtualize.ts Outdated Show resolved Hide resolved

dariatiurina added 2 commits October 15, 2025 10:47

Feedback

7561f25

Fixed test

b3b3f28

dariatiurina force-pushed the 59354-virtualize-scale branch from d83ab62 to b3b3f28 Compare October 16, 2025 10:02

ilonatommy approved these changes Oct 17, 2025

View reviewed changes

javiercn reviewed Oct 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix the bug with scrolling in Virtualize component with scaled elements #64013

Fix the bug with scrolling in Virtualize component with scaled elements #64013

dariatiurina commented Oct 13, 2025 •

edited by ilonatommy

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

ilonatommy left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ilonatommy commented Oct 17, 2025 •

edited

Loading

Uh oh!

javiercn Oct 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix the bug with scrolling in Virtualize component with scaled elements #64013

Are you sure you want to change the base?

Fix the bug with scrolling in Virtualize component with scaled elements #64013

Conversation

dariatiurina commented Oct 13, 2025 • edited by ilonatommy Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fix the bug with scrolling in Virtualize component with scaled elements

Description

Alternatives:

Changes:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

ilonatommy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ilonatommy commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Performance analysis

Uh oh!

javiercn Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dariatiurina commented Oct 13, 2025 •

edited by ilonatommy

Loading

ilonatommy commented Oct 17, 2025 •

edited

Loading